<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
</head>
    <script type="text/javascript" src="../vue.js"></script>

<!--
            条件渲染：
                1.v-if
                      写法：
                        a.v-if="表达式"
                        b.v-else-if="表达式"
                        c.v-else
                      适用于：切换频率较低的场景
                      特点：不展示的DOM元素直接被移除
                      注意：v-if可以和v-else-if，v-else 一起使用，但要求结构不能被打断
                2.v-show
                      写法：v-show=“表达式”
                      适用于：切换频率搞得场景
                      特点：不展示的DOM未被移除，仅仅是样式被隐藏掉

                3.备注：使用v-if的时候，元素可能无法获取到，但v-show一定能获取到
-->


<body>

<div id="root">
<!--            使用v-show做条件渲染-->
    <!--    <h2 v-show="false">欢迎来到{{name}}</h2>-->
    <!--    <h2 v-show="1 === 1">欢迎来到{{name}}</h2>-->

<!--            使用v-if做条件渲染-->
<!--        <h2 v-if="false">欢迎来到{{name}}</h2>-->
<!--        <h2 v-if="1 === 1">欢迎来到{{name}}</h2>-->
 <h2>当前的n值是:{{n}}</h2>
    <button @click="n++">点我n+1</button>

    <!--v-else 和v-else-if -->
<!--    <div v-if="n%3 === 1">Angular</div>-->
<!--&lt;!&ndash;    <div>@</div>&ndash;&gt;-->
<!--    <div v-else-if="n%3 === 2">React</div>-->
<!--    <div v-else-if="n%3 === 3">Vue</div>-->

<!--    <br/>-->
<!--    <br/>-->
<!--    <br/>-->

<!--    <div v-if="1 === 1">asd</div>-->
<!--    <div v-else-if="1 === 1">asdasd</div>-->

<!--  template只能和v-if进行配合  -->
    <template v-if="n===1">
        <h2>你好</h2>
        <h2>啥高规格</h2>
        <h2>北京</h2>
    </template>
</div>


</body>

<script type="text/javascript">

    Vue.config.productionTip = false

    const vm = new Vue({
        el:'#root',
        data:{
            name:'itshumm',
            n:0
        },
    })
</script>
</html>